<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            /* css 代码  */
        </style>
        <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
        <script src="../plugins/bower_components/jquery/dist/jquery.min.js"></script>
        
        <script>
        	$(function(){
        		$.post('../summary/countAbility.action' , function(data){
        			var chart = Highcharts.chart('container',{
        	        	credits:{
        	            	enabled:false
        	            },
        	            chart: {
        	                type: 'column'
        	            },
        	            title: {
        	                text: '老人能力等级统计',
        	                style: { "color": "green", "font-family":"隶书", "fontSize":"40px"}
        	            },
        	            xAxis: {
        	                categories: ['能力完好',  '轻度失能', '中度失能',  '重度失能'],
        	                crosshair: true,
        	                title: {
        	                    text: ''
        	                },
        	                gridLineColor: '#CCC',
        	                gridLineWidth: 1
        	            },
        	            colors:['green'],
        	            yAxis: {
        	                min: 0,
        	                title: {
        	                    text: '数量',
        	                    style:{ "color": "black","fontSize": "15px" }
        	                },
        	                labels:{
        	             	   style:{ "color": "black", "cursor": "default", "fontSize": "15px","font-weight":"bold" }
        	                }
        	            },
        	            tooltip: {
        	                // head + 每个 point + footer 拼接成完整的 table
        	                headerFormat: '<span style="font-size:10px">能力等级: <b>{point.key}</b></span><table>',
        	                pointFormat: '<tr><td style="padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y} 人</b></td></tr>',
        	                footerFormat: '</table>',
        	                shared: true,
        	                useHTML: true
        	            },
        	            plotOptions: {
        	                column: {
        	                    borderWidth: 0
        	                }
        	            },
        	            series: [{
        	            	name:'人数',
        	            	type:'',
        	                data: [data.ability_0?data.ability_0:0, data.ability_1?data.ability_1:0, data.ability_2?data.ability_2:0, data.ability_3?data.ability_3:0]
        	            }]
        	        });
        		})
        		
        	})
        
        </script>
        
    </head>
    
    
    <body style="background-color: white;">
        <div id="container" style="height:480px;"></div>
    </body>
</html>